<template>
	<block>
		<view v-if="error" class="color-999">{{error}}</view>
		<view @click="openData" class="color-black-1" v-else>
			<text v-if="!currentDate" class="color-999">{{placeholder}}</text>
			<view v-else class="hxt-flex">
				<template v-if="type=='range'||type=='multiple'">
					<view style="overflow:hidden;text-overflow:ellipsis;" v-if="!connector">
						<view v-for="item in currentDate">{{item}}</view>
					</view>
					<view v-else-if="!!connector" class="hxt-flex">
						<view v-for="(item,index) in currentDate"><text
								class="margin-lr-4">{{index==0?'':connector}}</text>{{item}}</view>
					</view>
				</template>
				<template v-else>
					{{currentDate}}
				</template>
				<van-icon @click.stop="currentDate=null" class="van-field__clear" v-if="clearable" size="14"
					name="close"></van-icon>
			</view>
		</view>
		<van-calendar :show="show" :default-date="timestamp" :type="type" :title="title" :show-title="showTitle"
			:show-subtitle="showSubtitle" :min-date="minDate" :max-date="maxDate" :show-confirm="showConfirm"
			:formatter="formatter" :readonly="readonly" :confirm-text="confirmText"
			:confirm-disabled-text="confirmDisabledText" :round="round" :close-on-click-overlay="closeOnClickOverlay"
			:first-day-of-week="firstDayOfWeek" color="#1989fa" :safe-area-inset-bottom="false" get-container="body"
			@confirm="confirm" @close="show=false"></van-calendar>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		name: "hxt-calenday",
		props: {
			value: {
				type: [Object,String],
				'default': function() {
					return null;
				}
			},
			title: { //标题
				type: String,
				'default': function() {
					return '日期选择';
				}
			},
			connector: { //连接符 ~ 至, 横向展示
				type: String,
				'default': function() {
					return '';
				}
			},
			//是否禁用组件
			disabled: {
				type: Boolean,
				'default': function() {
					return false
				}
			},
			type: { //选择类型:single表示选择单个日期，multiple表示选择多个日期，range表示选择日期区间
				type: String,
				'default': function() {
					return 'single';
				}
			},
			maxDate: { //最大时间
				type: Number,
				'default': function() {
					return hxt.dateAdd('M', +6, new Date()).getTime();
				}
			},
			minDate: { //最小时间
				type: Number,
				'default': function() {
					return hxt.dateAdd('M', -6, new Date()).getTime();
				}
			},
			showTitle: { //是否展示日历标题
				type: Boolean,
				'default': function() {
					return true;
				}
			},
			showSubtitle: { //是否展示日历副标题（年月）
				type: Boolean,
				'default': function() {
					return true;
				}
			},
			showConfirm: { //是否展示确认按钮
				type: Boolean,
				'default': function() {
					return true;
				}
			},
			confirmText: { //确认按钮文字
				type: String,
				'default': function() {
					return '确定';
				}
			},
			confirmDisabledText: { //确认按钮处于禁用状态时的文字
				type: String,
				'default': function() {
					return '确定';
				}
			},
			firstDayOfWeek: { //设置周起始日 0-6
				type: Number,
				'default': function() {
					return 0;
				}
			},
			readonly: {
				type: Boolean,
				'default': function() {
					return false;
				}
			},
			formatter: { //日期格式化函数
				type: Function,
				'default': function(day) {
					return day;
				}
			},

			placeholder: {
				type: String,
				'default': function() {
					return '请选择';
				}
			},
			closeOnClickOverlay: { //是否在点击遮罩层后关闭
				type: Boolean,
				'default': function() {
					return true;
				}
			},
			round: { // 	是否显示圆角
				type: Boolean,
				'default': function() {
					return true;
				}
			},
			clearable: { //是否可清空
				type: Boolean,
				'default': function() {
					return false;
				}
			},
			href: {
				type: String,
				default: function() {
					return null
				}
			}
		},
		data() {
			return {
				show: false,
				timestamp: null,
				error: ''
			};
		},
		watch: {
			value: {
				handler: function(newValue, oldValue) {
					var _this = this;
					if (!newValue) {
						if (_this.type == 'range' || _this.type == 'multiple') _this.timestamp = [hxt.dateAdd('d', 0,newValue)];
						else _this.timestamp = hxt.dateAdd('d', 0,newValue);
						return;
					};
					if (hxt.isArray(newValue) && _this.type != 'range' && _this.type != 'multiple') return _this
						.error = "单选，v-model不能是数组";
					if (!hxt.isArray(newValue) && (_this.type == 'range' || _this.type == 'multiple')) return _this
						.error = "多选，v-model必须是一个数组";
					if (hxt.isArray(newValue)) {
						_this.timestamp = [];
						$.each(newValue, function(idx, item) {
							_this.timestamp.push(hxt.dateAdd('M', -0, hxt.dateFormat('yyyy-MM-dd', item)));
						});
					} else {
						_this.timestamp = hxt.dateAdd('M', -0, hxt.dateFormat('yyyy-MM-dd', newValue));
					};
				},
				immediate: true
			}
		},
		computed: {
			currentDate: {
				get: function() {
					return this.value;
				},
				set: function(val) {
					this.$emit('input', val);
				}
			}
		},
		methods: {
			openData: function() {
				var _this = this;
				if (!!_this.disabled) return;
				_this.show = true;
			},
			confirm: function(e) {
				var _this = this;
				if (hxt.isArray(e.detail)) {
					var currentDate = [];
					$.each(e.detail, function(idx, item) {
						currentDate.push(hxt.dateFormat('yyyy-MM-dd', item));
					});
					_this.currentDate = currentDate;
				} else {
					_this.currentDate = hxt.dateFormat('yyyy-MM-dd', e.detail);
				};
				_this.timestamp = e;
				_this.show = false;
			}
		},
	}
</script>

<style>

</style>